<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="logList"
      border
      empty-text="暂无数据"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="Id"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="causer.email"
        label="账号"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        align="center"
        width="240"
      ></el-table-column>
      <el-table-column
        prop="updated_at"
        label="修改时间"
        align="center"
        width="240"
      ></el-table-column>
    </el-table>
    <paginAtion
      v-on:getNextPageList='getLoading'
      :paginationMeta="pagination"
    ></paginAtion>
  </div>
</template>

<script>
import { getLogList } from '@/api/log'
import paginAtion from "@/components/Pagination"
export default {
  name: 'logLogin',
  components: {
    paginAtion
  },
  data() {
    return {
      loading: false,
      logList: [],
      pagination: {
        current_page: 1,
        from: 1,
        last_page: 1,
        path: '',
        per_page: '10',
        to: 1,
        total: 1
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      console.log(123)
      const params = { page: this.pagination.current_page, per_page: this.pagination.per_page }
      getLogList(params)
        .then(
          res => {
            if (res.data.length > 0) {
              this.logList = res.data
              this.pagination = res.meta
            }
            this.loading = false
          }
        )
        .catch(
          err => {
            console.log(err)
          }
        )
    },
    getLoading(val) {
      this.pagination.current_page = val
      this.loading = true
      this.init()
    },
  }

}
</script>